@import "~scss/variables";

$sw-category-tree-field-transition-results: all ease-in-out 0.2s;

.sw-category-tree-field {
    position: relative;

    .sw-category-tree-field__main-wrapper {
        position: relative;
    }

    .sw-block-field__block {
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 0 8px;
        height: auto;
    }

    .sw-category-tree__input-field {
        display: block;
        min-width: 300px;
        width: 300px;
    }

    .sw-label {
        display: flex;
        margin-bottom: 0;
        margin-top: 8px;
    }

    .sw-category-tree-field__label-more {
        cursor: pointer;
    }

    .sw-category-tree-field__label-more .sw-category-tree-field__label-more-property {
        color: $color-shopware-brand-500;
    }

    .sw-category-tree-field__label-property {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sw-label__dismiss {
        display: none;
    }

    .sw-category-tree-field__selected-label:hover .sw-label__dismiss {
        display: inline-block;
    }

    .sw-category-tree-field__selected-label:hover .sw-category-tree-field__label-property {
        width: calc(100% - 16px);
    }

    .sw-category-tree-field__results_base {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    // Vue.js transitions
    .sw-category-tree-field__fade-down-enter-active,
    .sw-category-tree-field__fade-down-leave-active {
        transition: $sw-category-tree-field-transition-results;
        transform: translateY(0);
    }

    .sw-category-tree-field__fade-down-enter,
    .sw-category-tree-field__fade-down-leave-to {
        transform: translateY(-8px);
        opacity: 0;
    }

    &.is--disabled {
        .sw-block-field__block {
            background-color: $color-gray-100;
        }
    }
}

.sw-category-tree-field__results_popover {
    overflow-x: hidden;
    height: 350px;
    z-index: 20;
    border: 1px solid $color-gray-100;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 10%);
    background-color: $color-white;

    &.sw-popover__wrapper.--placement-bottom-outside {
        transform: translate(0, calc(-100% - 90px));
    }

    .sw-tree {
        border-width: 0;
    }

    .sw-tree .sw-tree__content {
        height: 100%;
        min-height: auto;
    }

    .sw-category-tree-field__results .sw-tree .sw-tree__content {
        min-height: 200px;
    }

    .sw-tree-item .sw-field--checkbox {
        margin-bottom: 0;
    }

    .sw-category-tree-field__search-results {
        padding: 16px;

        li.sw-category-tree-field__search-result {
            transition: background-color 0.1s ease;
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            padding: 0 12px 4px;
            min-height: 40px;
            border-radius: $border-radius-default;
        }

        li.sw-category-tree-field__search-result:hover {
            background-color: lighten($color-shopware-brand-500, 40);
        }

        li.sw-category-tree-field__search-result.is--focus {
            background-color: lighten($color-shopware-brand-500, 40);
        }

        li .sw-category-tree-field__search-results-checkbox {
            display: inline-block;
            margin: 8px 12px 0 0;
        }

        li .sw-category-tree-field__search-results-icon {
            margin-right: 12px;
        }

        li .sw-field--checkbox__content {
            display: inline-block;
        }
    }

    .sw-category-tree-field__empty-state {
        padding: 16px;
    }

    &.is--disabled {
        background-color: $color-gray-100;

        .sw-label {
            background-color: $color-gray-100;
        }

        &::after {
            content: "";
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
    }
}
